<template>
  <view class="container">
    <!-- 修改密码表单 -->
    <view class="form-section">
      <view class="title">修改支付密码</view>
      <view class="sub-title">请输入六位纯数字密码</view>

      <!-- 新密码输入框 -->
      <input
        class="input-field"
        placeholder="请输入新密码"
        type="number"
        maxlength="6"
        v-model="newPassword"
      />

      <!-- 确认密码输入框 -->
      <input
        class="input-field"
        placeholder="再次确认密码"
        type="number"
        maxlength="6"
        v-model="confirmPassword"
      />
    </view>

    <!-- 安全验证 -->
    <view class="form-section">
      <view class="title">安全验证</view>
      <view class="sub-title">
        验证码将发送至：<text class="phone-number">{{ maskedPhone }}</text>
      </view>

      <!-- 验证码输入和按钮 -->
      <view class="code-input-container">
        <input
          class="input-code"
          placeholder="输入验证码"
          v-model="verificationCode"
          maxlength="6"
        />
        <button class="code-button" @click="sendVerificationCode">{{codeButtonText}}</button>
      </view>
    </view>

    <!-- 确认修改按钮 -->
    <button class="submit-button" @click="submitChange">确认修改</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
		agent:{},
		newPassword: "",
		confirmPassword: "",
		verificationCode: "",
		phoneNumber: "", // 实际手机号
		isCodeSent: false, // 验证码发送状态
		codeButtonText: "获取验证码",
		countdown: 60, // 倒计时
		detail:{}
    };
  },
  onShow() {
  	/*获取个人中心数据*/
  	this.getData();
  },
  computed: {
    // 隐藏部分手机号
    maskedPhone() {
      return this.phoneNumber.replace(/^(\d{4})\d{4}(\d{3})$/, "$1****$2");
    },
  },
  methods: {
	/*获取数据*/
	getData() {
	  	let self = this;
	  	self._get('user.index/detail', {
	  		url: self.url
	  	}, function(res) {
	  		self.agent = res.data.agent;
	  		self.detail = res.data.userInfo;
			self.phoneNumber = self.detail.mobile;
	  	});
	},
    // 发送验证码
    sendVerificationCode() {
      if (this.isCodeSent) return;
	  let self = this;
	  self._post(
	  	'user.useropen/sendSmsCode', {
	  		mobile: self.phoneNumber,
	  		type: 'sendSms'
	  	},
	  	result => {
	  		if (result.code == 1) {
	  			uni.showToast({
	  				title: '发送成功'
	  			});
				self.startCountdown();
	  			self.isCodeSent = true;
	  		}
	  	}
	  );
    },
    // 倒计时逻辑
    startCountdown() {
      let timer = setInterval(() => {
        this.countdown--;
        this.codeButtonText = `${this.countdown}秒后重发`;
        if (this.countdown <= 0) {
          clearInterval(timer);
          this.isCodeSent = false;
          this.countdown = 60;
          this.codeButtonText = "获取验证码";
        }
      }, 1000);
    },
    // 提交修改密码
    submitChange() {
      if (!this.newPassword || this.newPassword.length !== 6) {
        uni.showToast({
          title: "请输入6位新密码",
          icon: "none",
        });
        return;
      }
      if (this.newPassword !== this.confirmPassword) {
        uni.showToast({
          title: "两次密码不一致",
          icon: "none",
        });
        return;
      }
	  
      if (!this.verificationCode) {
        uni.showToast({
          title: "请输入验证码",
          icon: "none",
        });
        return;
      }
	  
	  let formdata = {password: this.newPassword,code: this.verificationCode}
	  // 提交修改密码请求到后台
	  console.log("密码已修改", formdata);
	  let self = this;
	  uni.showLoading({
	  	title: '提交中'
	  })
	  self._post(
	  	'user.useropen/changePayPassword',
	  	formdata,
	  	result => {
			uni.hideLoading();
			console.info(result)
			if(result.code == 1){
				uni.showToast({
				  title: `修改成功`,
				  icon: 'success',
				  duration: 1500, // 提示框显示时间，单位为毫秒
				  success() {
				    uni.navigateBack();
				  }
				});	
			}else{
				uni.showToast({
				  title: `修改失败`,
				  icon: 'error',
				  duration: 1500, // 提示框显示时间，单位为毫秒
				  success() {}
				});	
			}
	  	},
	  	false,
	  	() => {
	  		uni.hideLoading();
	  	}
	  );
      
    },
  },
};
</script>

<style>
/* 页面容器 */
.container {
  background-color: #ffffff;
  min-height: 100vh;
  padding: 20px;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

/* 页面标题 */
.header {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  padding-bottom: 20px;
}

/* 表单区域 */
.form-section {
  margin-bottom: 30px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.sub-title {
  font-size: 14px;
  color: #a54ef0;
  margin-bottom: 15px;
}

.phone-number {
  color: #a54ef0;
  font-weight: bold;
}

.input-field,
.input-code {
  background: #f7f7f7;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 16px;
  color: #333;
  margin-bottom: 15px;
  width: 100%;
  /*box-sizing: border-box;*/
}

/* 验证码输入和按钮 */
.code-input-container {
  display: flex;
  align-items: center;
}

.input-code {
  flex: 2;
  margin-right: 10px;
}

.code-button {
  flex: 1;
  background: linear-gradient(to right, #a54ef0, #d48efc);
  color: #fff;
  font-size: 14px;
  border-radius: 20px;
  margin-bottom: 15px;
}

/* 提交按钮 */
.submit-button {
  background: #a54ef0;
  color: #fff;
  font-size: 16px;
  padding: 5px;
  text-align: center;
  border: none;
  border-radius: 25px;
  margin-top: 20px;
}
</style>
